<template>
  <div class="databoard">
    <!-- 顶栏 -->
    <div class="top">
      <div class="title">
        <div class="tip">欢迎回来，{{ this.$store.state.login.userInfo.username }}</div>
        <div class="text">数据看板</div>
      </div>
      <div class="date">
        <x-date-picker
          class="my-style"
          v-model="date"
          range-separator="一"
          type="datetimerange"
          value-format="yyyy年MM月dd日HH:mm"
          format="yyyy年MM月dd日"
          :start-placeholder="pickerDate[0]"
          :end-placeholder="pickerDate[1]"
          :default-time="['12:00:00']"
          prefix-icon="el-icon-date"
        ></x-date-picker>
      </div>
    </div>

    <!-- 内容 -->
    <div class="body">
      <el-row :gutter="21" class="row">
        <el-col :span="16">
          <!-- 实时数据卡片 -->
          <x-card class="realtime" title="实时数据">
            <!-- 标题右边的信息 -->
            <template v-slot:title-right>
              <div>截止至{{ date[1] }}</div>
            </template>
            <!-- 中件的信息 -->
            <div class="info">
              <div
                class="info-item"
                v-for="(item, index) in realtimeData.order?.slice(0, -2)"
                :key="index"
              >
                <div class="count">{{ item.count }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
            <!-- 底部的信息 -->
            <div class="bottom">
              <el-row>
                <el-col :span="12">
                  <div class="left">
                    <div class="message">
                      <span>交易金额(元)</span>
                      <div class="count">
                        {{ realtimeData.order.length ? realtimeData.order.at(-1).count : '' }}
                      </div>
                      <div class="comp">
                        <span>较昨日</span>
                      </div>
                    </div>
                    <!-- 图表1 -->
                    <div class="chart" ref="chart1" id="chart1"></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="right">
                    <div class="message">
                      <span>订单数</span>
                      <div class="count">
                        {{ realtimeData.order.length ? realtimeData.order.at(-2).count : '' }}
                      </div>
                      <div class="comp">
                        <span>较昨日</span>
                      </div>
                    </div>
                    <!-- 图表2 -->
                    <div class="chart" ref="chart2" id="chart2"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </x-card>
        </el-col>

        <el-col :span="8">
          <!-- 用户数据信息卡片 -->
          <x-card class="user">
            <!-- 店铺信息 -->
            <div class="info">
              <div class="left">
                <img :src="userData.icon" class="icon" alt="" />
                <div class="username">
                  <div class="name">{{ userData.username }}</div>
                  <div class="level">
                    <img :src="userData.levelImg" alt="" />
                    <span>{{ userData.level }}</span>
                  </div>
                </div>
              </div>
              <div class="right">
                <img src="/images/shop2.svg" />
                <span>进入店铺</span>
              </div>
            </div>
            <div class="message">
              <div class="title">店铺动态评分</div>
              <div class="score">
                描述 <span>{{ userData.desc }}</span> 服务 <span>{{ userData.service }}</span> 物流
                <span>{{ userData.logistics }}</span>
              </div>
            </div>
            <div class="money-info">
              <div class="count">
                <div class="count-item">
                  <div class="number">
                    {{ formatMoney(userData.moeny) }}
                  </div>
                  <div class="name">可用余额（元）</div>
                </div>
                <div class="count-item">
                  <div class="number">{{ formatMoney(userData.freezeMoney) }}</div>
                  <div class="name">冻结余额（元）</div>
                </div>
                <div class="count-item">
                  <div class="number">{{ formatMoney(userData.promiseMoney) }}</div>
                  <div class="name">保证金（元）</div>
                </div>
              </div>
              <div class="btn">
                <el-button type="text">提现</el-button>
                <el-button type="primary">充值</el-button>
              </div>
            </div>
          </x-card>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <!-- 店铺数据卡片 -->
          <x-card class="shop" title="店铺数据">
            <!-- 顶部右标签 -->
            <template v-slot:title-right>
              <div class="btn">
                <img src="/images/添加数据.svg" class="btn-img" />
                <div class="btn-text">添加数据</div>
              </div>
            </template>
            <!-- 广告 -->
            <div class="ad">
              <img src="/images/ad.svg" class="ad-img" />
              <div class="ad-text">
                调整新会员礼包优惠力度，吸引消费者入会并转化 <span>设置新用户礼包</span>
              </div>
            </div>
            <!-- 数据 -->
            <div class="data">
              <!-- 店铺等级 -->
              <div class="level">
                <div class="level-top">
                  <div class="text">店铺等级</div>
                  <div class="img">
                    <div class="fill fill-box" v-for="i in shopData.level" :key="i"></div>
                    <div
                      class="unfill fill-box"
                      v-for="i in 5 - shopData.level"
                      :key="`${i}a`"
                    ></div>
                  </div>
                </div>
                <div class="level-body">
                  当前<span>{{ 3 }}</span
                  >级
                </div>
                <div class="level-bottom">
                  <span>{{ 4 }}</span> 级可享受钻石会员权益
                </div>
              </div>
              <!-- 数据项 -->
              <div class="item" v-for="(item, index) in shopData.info">
                <div class="item-top">{{ item.name }}</div>
                <div class="item-middle">{{ item.value }}</div>
                <div class="item-bottom">
                  较昨日 <img v-if="item.comp.slice(0, 1) === '-'" src="/images/减少.svg" /><img
                    v-else
                    src="/images/增加.svg"
                  />
                  <span>{{ item.comp.slice(0, 1) === '-' ? item.comp.slice(1) : item.comp }}</span>
                </div>
              </div>
            </div>
          </x-card>
        </el-col>
        <el-col :span="8">
          <!-- 销售报告卡片 -->
          <x-card class="report" title="销售报告">
            <!-- 饼状图 -->
            <div class="report-chart" ref="reportChart"></div>
          </x-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import * as dayjs from 'dayjs'
  import { getDashboardDataAPI } from '@/api/dashboard'
  import { drawLineChart } from './charts/lineChart'
  import { drawPieChart } from './charts/pieChart'

  export default {
    name: 'Databoard',
    data() {
      return {
        abortController: null,
        date: [
          dayjs('2024-04-0112:00:00').format('YYYY/MM/DD HH:mm'),
          dayjs('2024-04-29 12:00:00').format('YYYY/MM/DD HH:mm'),
        ],
        // 实时卡片数据
        realtimeData: {
          order: [],
          allDays: [],
          allMoney: [],
          allOrders: [],
          chart1: {},
          chart2: {},
        },
        // 用户卡片数据
        userData: {
          icon: '',
          username: '',
          level: '',
          levelImg: '',
          moeny: 0,
          freezeMoney: 0,
          promiseMoney: 0,
          desc: '',
          service: '',
          logistics: '',
        },
        // 店铺数据
        shopData: {
          level: 0,
          info: [
            { name: '支付转化率', value: '15.11%', comp: '-2.3%' },
            { name: '访客数', value: 1121, comp: '5.77%' },
            { name: '支付订单数', value: 212, comp: '4.13%' },
            { name: '浏览量', value: 1502, comp: '2.21%' },
          ],
          realTimeVisitors: {
            time: '',
            addr: '',
          },
          mobileVisitorVolume: {},
          productRanking: '',
          competitiveDynamics: '',
        },
        // 销售报告数据
        reportData: {
          chart: {},
        },
      }
    },
    computed: {
      pickerDate() {
        return [
          dayjs(this.date[0]).format('YYYY年MM月DD日'),
          dayjs(this.date[1]).format('YYYY年MM月DD日'),
        ]
      },
    },
    methods: {
      // 请求数据
      async getDashboardData() {
        try {
          // 发送请求
          const { data } = await getDashboardDataAPI()
          // 接收数据
          Object.assign(this.realtimeData, data.realtimeData)
          Object.assign(this.userData, data.userData)
          Object.assign(this.shopData, data.shopData)
          // 画出折线图
          this.realtimeData.chart1 = drawLineChart({
            dom: this.$refs.chart1,
            xData: this.realtimeData.allDays,
            yData: this.realtimeData.allMoney,
          })
          this.realtimeData.chart2 = drawLineChart({
            dom: this.$refs.chart2,
            xData: this.realtimeData.allDays,
            yData: this.realtimeData.allOrders,
            lineColor: '#4ECDA3',
            areaColor: '#EDFBF6',
          })
          // 画出饼状图
          this.reportData.chart = drawPieChart({
            dom: this.$refs.reportChart,
            data: [
              { value: 658, name: '小天同学' },
              { value: 205, name: '社区团购' },
              { value: 154, name: '其他' },
            ],
          })
        } catch (error) {
          console.log('执行失败代码块了吗')
        }
      },

      // 监听窗口大小变化,重新渲染图表
      handleResize() {
        this.realtimeData.chart1.resize()
        this.realtimeData.chart2.resize()
      },
      // 转换余额显示格式
      formatMoney(value) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      },
    },
    mounted() {
      // 请求数据
      this.abortController = new AbortController() //  创建一个控制器
      this.getDashboardData(this.abortController.signal)
      // 添加 resize 事件监听器
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      // 在组件销毁时移除 resize 事件监听器，防止内存泄漏
      window.removeEventListener('resize', this.handleResize)
      if (this.userData.username) {
        this.realtimeData.chart1.dispose()
        this.realtimeData.chart2.dispose()
        this.reportData.chart.dispose()
      }
      this.abortController.abort() //  取消请求
    },
  }
</script>

<style lang="scss">
  .el-picker-panel {
    margin-right: 10px !important;
  }
  .el-picker-panel__body {
    margin-right: 10px !important;
  }
  .my-style {
    width: 315px !important;
    height: 48px !important;
    border: 0;
    padding-right: 0px !important;
    border-radius: 14px !important;

    .el-range-input {
      font-size: 16px !important;
      font-weight: 400 !important;
      color: rgba(10, 22, 41, 1) !important;
      &::placeholder {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: rgba(10, 22, 41, 1) !important;
      }
    }
    .el-input__icon {
      font-size: 16px !important;
      margin-left: 2px !important;
      margin-right: 5px !important;
      color: rgba(10, 22, 41, 1) !important;
    }
    .el-range-separator {
      font-size: 16px !important;
      margin-top: 8px !important;
    }
    .el-input__icon el-range__close-icon {
      width: 0px !important;
      height: 0px !important;
      margin: 0px !important;
    }
  }
</style>

<style lang="scss" scoped>
  .databoard {
    // 顶栏
    .top {
      margin-bottom: 48px;
      display: flex;
      justify-content: space-between;
      .title {
        .tip {
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 22.4px;
          color: rgba(125, 133, 146, 1);
          text-align: left;
          vertical-align: top;
        }
        .text {
          margin-top: 5.4px;
          font-size: 36px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 42.19px;
          color: rgba(10, 22, 41, 1);
          text-align: left;
          vertical-align: top;
        }
      }
      .date {
        margin-top: 20px;
        font-size: 14px;
      }
    }

    // 内容
    .body {
      .row {
        margin-bottom: 25px;
      }
      // 实时数据卡片样式
      .realtime {
        height: 277px;
        background: #ffffff;
        border-radius: 24px;
        .info {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 93px;
          margin-top: 20px;
          background-color: #f9fbff;
          .info-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90.8px;
            height: 45px;
            .count {
              font-size: 20px;
              font-weight: 700;
              text-align: center;
            }
            .title {
              font-size: 14px;
              font-weight: 400;
              text-align: center;
              color: #797a7b;
            }
          }
        }
        .bottom {
          margin-top: 20px;
          justify-content: space-between;
          height: 85px;
          .message {
            display: flex;
            height: 85px;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            span {
              display: block;
              height: 17px;
              opacity: 0.6;
              display: flex;

              /** 文本1 */
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 16.41px;
              color: rgba(0, 0, 0, 1);
              text-align: left;
            }
            .count {
              height: 38px;
              opacity: 1;
              display: flex;

              /** 文本1 */
              font-size: 32px;
              font-weight: 700;
              letter-spacing: 0px;
              line-height: 37.5px;
              color: rgba(0, 0, 0, 1);
              text-align: left;
              vertical-align: top;
            }
            comp {
              /** 文本1 */
              font-size: 12px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 14.06px;
              color: rgba(0, 0, 0, 1);
              text-align: left;
              vertical-align: top;
            }
          }

          .left {
            display: flex;
            justify-content: start;
            .chart {
              flex-grow: 1;
              height: 85px;
            }
          }
          .right {
            margin-left: 20px;
            display: flex;
            .chart {
              flex-grow: 1;
              height: 85px;
            }
          }
        }
      }

      // 用户数据信息卡片样式
      .user {
        height: 277px;
        background: #ffffff;
        border-radius: 24px;
        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            .icon {
              width: 48px;
              height: 48px;
              border-radius: 50%;
            }
            display: flex;
            .username {
              .name {
                /** 文本1 */
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(26, 38, 59, 1);
                text-align: left;
                vertical-align: top;
              }
              margin-left: 8px;
              .level {
                display: flex;
                align-items: center;
                margin-top: 2px;
                img {
                  margin-right: 4px;
                }
                span {
                  /** 文本1 */
                  font-size: 12px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  line-height: 14.06px;
                  color: rgba(252, 151, 0, 1);
                  text-align: left;
                  vertical-align: top;
                }
              }
            }
          }

          .right {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90px;
            height: 31px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            cursor: pointer;

            img {
              margin-right: 4px;
            }

            span {
              /** 文本1 */
              font-size: 12px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 14.06px;
              color: rgba(32, 32, 32, 1);
              text-align: left;
              vertical-align: top;
            }
          }
        }
        .message {
          .title {
            /** 文本1 */
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 16.41px;
            color: rgba(32, 32, 32, 0.4);
            text-align: left;
            vertical-align: top;
          }
          .score {
            margin-top: 8px;
            /** 文本1 */
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 14.06px;
            color: rgba(32, 32, 32, 1);
            text-align: left;
            vertical-align: top;

            span {
              /** 文本1 */
              font-size: 14px;
              font-weight: 500;
              line-height: 16.41px;
              color: black;
            }
          }
        }
        .money-info {
          height: 95px;
          margin-top: 41px;
          .count {
            height: 51px;
            display: flex;
            justify-content: space-around;
            margin-bottom: 12px;
            .count-item {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              .number {
                font-size: 20px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 23.44px;
                color: rgba(0, 0, 0, 1);
                text-align: left;
                vertical-align: top;
              }
              .name {
                /** 文本1 */
                font-size: 12px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 14.06px;
                color: #999999;
                text-align: left;
                vertical-align: top;
              }
            }
          }
          .btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .el-button--text {
              border: 1px solid #e8e8e8;
              color: #797979;
            }
            .el-button {
              width: 156px !important;
              border-radius: 4px !important;
            }
          }
        }
      }

      // 商品数据卡片样式
      .shop {
        height: 277px;
        background: #ffffff;
        border-radius: 24px;
        /** 文本1 */
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 14.06px;
        color: #797979;
        text-align: left;
        vertical-align: top;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 90px;
          height: 31px;
          border: 1px solid #e8e8e8;
          border-radius: 4px;
          cursor: pointer;
          .btn-img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }
        .ad {
          display: flex;
          justify-content: start;
          align-items: center;
          height: 36px;
          margin-top: 20px;
          background: rgba(24, 109, 245, 0.05);
          .ad-img {
            width: 20px;
            height: 20px;
            padding: 8px;
          }
          .ad-text {
            font-size: 14px;
          }
        }
        .data {
          display: flex;
          justify-content: space-between;
          height: 94px;
          margin-top: 20px;
          .level {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 131px;
            height: 94px;
            .level-top {
              display: flex;
              justify-content: space-between;
              .text {
                font-size: 14px;
                color: #797979;
              }
              .img {
                display: flex;
                .fill-box {
                  width: 12px;
                  height: 12px;
                  margin-right: 2px;
                  opacity: 1;
                  border-radius: 2px;
                }
                .fill {
                  background: rgba(255, 153, 0, 1);
                }
                .unfill {
                  background-color: #e9e9e9;
                }
              }
            }
            .level-body {
              color: #a6a6a6;
              span {
                font-size: 40px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 46.88px;
                color: rgba(255, 153, 0, 1);
                text-align: left;
              }
            }
            .level-bottom {
              span {
                color: rgba(255, 153, 0, 1);
              }
            }
          }
          .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 94px;
            .item-top {
              font-size: 14px;
            }
            .item-middle {
              /** 文本1 */
              font-size: 32px;
              font-weight: 500;
              letter-spacing: 0px;
              line-height: 37.5px;
              color: rgba(32, 32, 32, 1);
              text-align: left;
              img {
                width: 12px;
                height: 12px;
                vertical-align: baseline;
              }
            }
          }
        }
      }

      // 销售报告卡片样式
      .report {
        height: 277px;
        background: #ffffff;
        border-radius: 24px;
        margin-left: 20px;

        .report-chart {
          height: 230px;
        }
      }
    }
  }
</style>
